<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="(item,index) in letters" :key="item+index">{{item}}</li>
    </ul>
    <button @click="btnClick"> 按钮</button>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        letters: ['A', 'A', 'C', 'D', 'E']
      },
      methods: {
        btnClick() {
          //1.push方法，可以做到相应式
          this.letters.push('aaa');
          // this.letters.push('aaa','bbb','ccc');

          //2.pop():删除数组中的最后一个元素，可以做到相应式
          // this.letters.pop();

          //3.shift():删除数组中的第一个元素，可以做到相应式
          //this.letters.shift();

          //4.unshift():在数组最前面添加元素，可以做到相应式
          // this.letters.unshift('aaaa')
          //this.letters.unshift('aaaa','bbbb','cccc')

          //5.splice作用：删除元素/插入元素/替换元素，可以做到相应式
          //删除元素：第二个参数传入你要删除几个元素
          //splice(start):表示删除start以后的元素全部删掉
          //this.letters.splice(1)
          //splice(start，count):表示从start删除count个元素
          //this.letters.splice(1，2)//删除1之后的两个元素
          //替换元素：splice(1,3,'m','n','l')
          //this.letters.splice(1,3,'m','n','l')
          //插入元素：splice(1,0,'m','n','l')
          //this.letters.splice(1,0,'m','n','l')

          //6.sort()，可以做到相应式
          //this.letters.sort();

          //7.reverse()，可以做到相应式
          //this.letters.reverse();

          //8.通过索引值修改数组中的元素,不是响应式的
          //this.letters[0] = 'bbbb';
          //可以通过以下方式代替
          //this.letters.splice(0,1,'bbbbbb')
          //set(要修改的值，索引值，修改后的值)
          // Vue.set(this.letters,0,'bbbbb')
        }
      }
    })
  </script>
</body>

</html>